<template>
  <div>
    <a-button type="primary"  icon="form" style="margin-left: 10px" @click="doAddTag">添加</a-button>
    <a-table :columns="columns" :data-source="data"  v-if="showTable" :pagination="false">
      <template slot="action" slot-scope="text,record">
      <span>
        <a-button type="danger" danger @click="doDeleteTag(record.id)" icon="delete">删除</a-button>
      </span>
      </template>
    </a-table>
    <h1 v-else style="text-align: center;">暂无数据,喝杯咖啡再来吧!!</h1>
    <a-modal :visible="showModal" title="添加标签" ok-text="提交" cancel-text="取消" @cancel="onClose" @ok="handleSubmit">
      <a-form :model="status" hide-required-mark :colon="false" label-align="left"
              :label-col="{ style: { width: '60px' } }">
        <a-form-item label="名称">
          <a-input v-model:value="status.name"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
name: "TagAdmin",
  data(){
    return{
      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
          width: 100,
        },
        {
          title: '标签名',
          dataIndex: 'name',
          key: 'name',
          width: 150,
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 250,
          scopedSlots: {customRender: 'action'},
        },
      ],
      data:[],
      showTable:false,
      showModal:false,
      status:{
        id:0,
        name:''
      }
    }
  },
  methods:{
  async getData(){
   let result= await this.$API.findAllTag()
    if (result.code==10000){
      this.data=result.data
      this.showTable=true
    }else {
      this.$message.error('系统错误')
      this.showTable=false
    }
  },
    //删除标签
    async doDeleteTag(index){
     this.status.id=index
     let result=await this.$API.deleteTag(this.status)
      if (result.code==10000){
        this.$message.success('删除成功')
        await this.getData()
      }else {
        this.$message.error('删除失败')
      }
    },
    //增加标签
    doAddTag(){
     this.showModal=true
    },
    onClose(){
      this.showModal=false
    },
    //添加标签
    async handleSubmit(){
     let result=await this.$API.addTag(this.status)
      if (result.code==10000){
        this.$message.success('添加标签成功')
        await this.getData()
      }else {
        this.$message.error('添加标签失败')
      }
    }
  },
  mounted() {
  this.getData()
  }
}
</script>

<style scoped>

</style>
